<script setup>
import { reactive, watch } from 'vue'
import request from '@/utils/request'
import { getKwCodeByMaterialCodeAPI } from '@/api/warehouse/warmanage/modeling.js'
const { proxy } = getCurrentInstance()

const emit = defineEmits()

const props = defineProps({
  // 控制弹窗
  isShow: {
    type: Boolean,
    default: false
  },
  // 后端所需id
  id: {
    type: String || Number,
    default: ''
  },
  //   接口地址
  url: {
    type: String,
    default: ''
  },
  //   是否是三个tabs
  isTabs: {
    type: Boolean,
    default: false
  },
  // 是否需要撤销按钮
  revokeUrl: {
    type: String,
    default: false
  },
  // 是否需要撤销完成按钮
  yesUrl: {
    type: String,
    default: false
  },
  tabTitle: {
    type: String,
    default: '库位撤销'
  },
  // 数据
  data: {
    type: Object,
    default: () => {}
  }
})
// 表单
const ruleForm = reactive({
  executionOrder: 1,
  type: 1, // tabs页面
  ckId: '', // 仓库id
  kqId: '', // 库区id
  kwId: '', // 库位id
  combinationName: '', // 库位信息
  id: '', // 传入数据的id
  inputValue: '' // 输入栏
})
console.log(props.id, 'props.id')

// 接口返回信息i
const returnForm = reactive({
  placeholder: '请关联库位', // 站位提示
  docHandoverMethod: '', // 3 整单 2 批次 1 单个物料
  message: '', // 提示内容
  ckId: '', // 仓库id
  kqId: '', // 库区id
  kwId: '', // 库位id
  combinationName: '', // 库位信息
  quantityIdentification: '', // 计划量/实际量
  warehouseNumber: '' // 入库数量
})

// 提交
const submit = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.url) return proxy.errorMsg('请传入接口url!!!')
  ruleForm.id = props.id

  try {
    proxy.$modal.loading('请稍候...')
    const { data: res } = await request({
      url: '/storage' + props.url,
      method: 'POST',
      data: ruleForm
    })

    const code = res.resultCode || res.code
    // 响应信息
    returnForm.message += `${res.message || ''}<br />`
    if (code != 200) return proxy.errorMsg(res.message)

    if (props.tabTitle == '条码撤销') {
    }
    //  步骤1
    if (ruleForm.executionOrder == 1) {
      // 仓库id
      ruleForm.ckId = res.ckId
      // 库区id
      ruleForm.kqId = res.kqId
      // 库位id
      ruleForm.kwId = res.kwId
      // 库位信息
      ruleForm.combinationName = res.warehouseMessage || res.combinationName
      returnForm.combinationName = res.warehouseMessage || res.combinationName
      returnForm.placeholder = '请扫描/输入物料条码'

      // // 请求成功步骤 + 1
      ruleForm.executionOrder = 2
      // if (ruleForm.executionOrder > 2) ruleForm.executionOrder = 1
    }
    // 计划/实际量
    returnForm.quantityIdentification = res.quantityIdentification
    // 入库数量
    returnForm.warehouseNumber = res.warehouseNumber
    ruleForm.inputValue = ''
  } catch (err) {
    new Error(err)
    returnForm.message += `${err}<br />`
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 拣货完成
const yes = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.yesUrl) return proxy.errorMsg('请传入拣货完成接口url!!!')
  // if (ruleForm.inputValue) {
  //   const result = await proxy.MessageBox(`${ruleForm.inputValue}此物料未出库,是否确认`)
  //   if (!result) return
  // }
  try {
    proxy.$modal.loading('请稍候...')
    await request({
      url: '/storage' + props.yesUrl,
      method: 'POST',
      data: { id: props.id }
    })
    proxy.successMsg('操作成功')
    setTimeout(() => {
      emit('yes')
    }, 800)
  } catch (err) {
    new Error(err)
    returnForm.message += `${err}<br />`
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 撤销
const revoke = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.revokeUrl) return proxy.errorMsg('请传入撤销接口url!!!')

  try {
    proxy.$modal.loading('请稍候...')

    // if (!ruleForm.inputValue) return proxy.errorMsg('请填写信息')
    await request({
      url: '/storage' + props.revokeUrl,
      method: 'POST',
      data: { id: props.id }
    })
  } catch (err) {
    new Error(err)
    returnForm.message += `${err}<br />`
  } finally {
    proxy.$modal.closeLoading()
  }
}

/**
 * 通过物料编码查询出关联库位
 */
const getCode = async data => {
  try {
    const res = await getKwCodeByMaterialCodeAPI({ materialCode: data })
    ruleForm.planKw = res.data
  } catch (error) {}
}

// 关闭弹窗
const close = () => {
  for (let Key in returnForm) {
    returnForm[Key] = ''
  }
  for (let Key in ruleForm) {
    ruleForm[Key] = ''
  }
  emit('close')
}

watch(
  () => props.isShow,
  () => {
    ruleForm.executionOrder = 1
    ruleForm.type = 1
    ruleForm.ckId = ''
    ruleForm.kqId = ''
    ruleForm.kwId = ''
    ruleForm.combinationName = ''
    ruleForm.id = ''
    ruleForm.inputValue = ''
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => ruleForm.type,
  (val, load) => {
    if (val == 1) returnForm.placeholder = '请关联库位'
    if (val == 2 && props.tabTitle != '条码撤消') {
      returnForm.placeholder = '请扫描库位信息'
    }
    if (val == 2 && props.tabTitle == '条码撤消') {
      returnForm.placeholder = '请扫描/输入物料条码'
    }
    if (val == 3) returnForm.placeholder = '请扫描/输入物料条码'
    if (val != 3 && load != 3) {
      returnForm.docHandoverMethod = ''
      returnForm.ckId = ''
      returnForm.kqId = ''
      returnForm.kwId = ''
      returnForm.combinationName = ''
      returnForm.quantityIdentification = ''
      returnForm.warehouseNumber = ''
      ruleForm.ckId = ''
      ruleForm.kqId = ''
      ruleForm.kwId = ''
      ruleForm.combinationName = ''
      ruleForm.inputValue = ''
      ruleForm.executionOrder = 1
    } else {
      ruleForm.executionOrder = 2
    }
    console.log(props.tabTitle)
    // if (props.tabTitle == '条码撤消')
    ruleForm.type = val
  },
  {
    deep: true
  }
)

watch(
  () => props.data,
  val => {
    if (!val) return
    getCode(val.materialCode)
  },
  {
    deep: true
  }
)
</script>
<template>
  <div class="app-container">
    <p-XiaoheDialog :dialogVisible="props.isShow" title="入库" @close="close" width="20%">
      <template #body>
        <el-form label-width="80px" status-icon>
          <el-form-item label="入库方式">
            <el-radio-group v-model="ruleForm.type">
              <el-radio-button size="mini" :name="1" label="1" @click="ruleForm.type = 1">扫码入库</el-radio-button>
              <el-radio-button v-if="!props.isTabs" size="mini" :name="2" label="2" @click="ruleForm.type = 2"
                >批次入库</el-radio-button
              >
              <el-radio-button
                size="mini"
                :name="props.isTabs ? 2 : 3"
                :label="props.isTabs ? 2 : 3"
                @click="props.isTabs ? (ruleForm.type = 2) : (ruleForm.type = 3)"
                >{{ props.tabTitle }}</el-radio-button
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="库位信息" v-if="!(props.tabTitle == '条码撤销' && ruleForm.type == 2)">
            <el-input disabled v-model="returnForm.combinationName" />
          </el-form-item>
          <el-form-item label="计划库位">
            <el-input disabled clearable :rows="1" type="textarea" v-model="ruleForm.planKw" />
          </el-form-item>
          <el-form-item label="输入栏">
            <el-input v-model="ruleForm.inputValue" @keyup.enter="submit" :placeholder="returnForm.placeholder" />
            <el-input
              v-show="false"
              v-model="ruleForm.inputValue"
              @keyup.enter="submit"
              :placeholder="returnForm.placeholder"
            />
          </el-form-item>
        </el-form>
        <div style="width: 100%; margin-top: 10px">
          <div class="flex-between">
            <span
              >计划/实际量：{{
                returnForm.quantityIdentification == 'null' ? '返回为null' : returnForm.quantityIdentification
              }}</span
            >

            <span>入库数量{{ returnForm.warehouseNumber == 'null' ? '返回为null' : returnForm.warehouseNumber }}</span>
          </div>

          <div class="textarea" v-html="returnForm.message"></div>

          <div class="footer_btn">
            <div class="b">
              <el-button v-if="props.revokeUrl" @click="revoke">拣货撤销</el-button>
              <el-button type="primary" v-if="props.yesUrl" @click="yes">拣货完成</el-button>
            </div>
          </div>
        </div>
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style lang="scss" scoped>
.footer_btn {
  margin-top: 20px;
  width: 100%;
}
.b {
  float: right;
}

.flex-between {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.btns {
  color: #2e91fc;
  background-color: #fff;
}

.btns-av {
  color: #fff;
  background-color: #2e91fc;
}
.btns-av,
.btns {
  text-align: center;
  cursor: pointer;
  padding: 5px;
  width: 80px;
}
.flex-items-center {
  margin: 10px 0;
}

.textarea {
  height: 150px;
  border: 1px solid #dbdbdb;
  overflow: auto;
}
</style>
